<template>
  <div class="orgChart">
    <div ref="orgTree" style="height: 100%">
      <vue2-org-tree
        name="test"
        :data="orgChartData"
        :horizontal="true"
        :collapsable="true"
        :label-class-name="labelClassName"
        :render-content="renderContent"
        @on-expand="onExpand"
        @on-node-click="onNodeClick"
      />
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: 'OrgChart',
  props: {
    orgChartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      horizontal: true,
      collapsable: true,
      expandAll: false,
      labelClassName: 'bg-white'
    }
  },
  methods: {
    // 点击生成图片
    generatorImage() {
      let targetDom = this.$refs.orgTree
      html2canvas(targetDom, {
        height: targetDom.scrollHeight,
        width: targetDom.scrollWidth
      }).then((canvas) => {
        // this.$refs.addImage.append(canvas);//在下面添加canvas节点
        const link = document.createElement('a')
        link.href = canvas.toDataURL() // 下载链接
        link.setAttribute('download', '组织架构图.png')
        link.style.display = 'none' // a标签隐藏
        document.body.appendChild(link)
        link.click()
      })
    },
    // 下面都是生成结构图用函数
    renderContent(h, data) {
      return data.label
      return (
        <div class="treeItem">
          <el-popover placement="right" trigger="hover" popper-class="treeItemPopover">
            <div class="btn">
              <el-button
                size="mini"
                icon="el-icon-circle-plus-outline"
                onClick={() => {
                  this.openAddFrom(data)
                }}
              >
                添加节点
              </el-button>
            </div>
            <div class="btn">
              <el-button
                size="mini"
                icon="el-icon-circle-plus-outline"
                onClick={() => {
                  this.openAddFrom(data)
                }}
              >
                添加节点
              </el-button>
            </div>

            <div slot="reference">
              <div class="labelName">
                <span>{data.label}</span>
              </div>
            </div>
          </el-popover>
          <div class={this.classType(data, 'position')} style={this.classType(data, 'style')}>
            <i class={this.classType(data, 'icon')}></i>
            {data.label}
          </div>
        </div>
      )
    },
    classType(data, type) {
      switch (type) {
        case 'icon':
          return data?.children?.length > 0 ? 'el-icon-arrow' : 'el-icon-plus'
        case 'position':
          return data?.children?.length > 0 ? 'statusTop' : 'statusRight'
        case 'style':
          return data?.children?.length > 0 ? '' : 'margin-left:' + (data?.label?.length * 16 + 40) + 'px'
      }
    },
    onExpand(e, data) {
      if ('expand' in data) {
        data.expand = !data.expand
        if (!data.expand && data.children) {
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    },
    onNodeClick(e, data) {},
    collapse(list) {
      var _this = this
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false
        }
        child.children && _this.collapse(child.children)
      })
    },
    toggleExpand(data, val) {
      var _this = this
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, 'expand', val)
          if (item.children) {
            _this.toggleExpand(item.children, val)
          }
        })
      } else {
        this.$set(data, 'expand', val)
        if (data.children) {
          _this.toggleExpand(data.children, val)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.orgChart {
  height: 79.5vh;
  /deep/.org-tree-node-label {
    .org-tree-node-label-inner {
      box-shadow: none;
      border: 1px solid #dddddd;
    }
    background-color: #fff;
    white-space: nowrap;
  }
  .bg-white {
    background-color: red;
    box-shadow: none;
  }
  /deep/.treeItem {
    position: relative;
    margin: -10px -15px;
    .labelName {
      padding: 10px 15px;
    }
    .statusRight {
      position: absolute;
      bottom: 10px;
      font-size: 13px;
    }
    .statusTop {
      position: absolute;
      bottom: 40px;
      font-size: 13px;
      width: 100%;
    }
  }
}
</style>
<style lang="less">
.treeItemPopover {
  .btn {
    display: grid;
  }
  .btn:not(:first-of-type) {
    margin-top: 10px;
  }
}
</style>
